<template>
  <div class="box">
    <div class="iconfont icon-shanchu2"></div>
    <div class="zi">密码登录</div>
    <div class="mi">
      <input type="text" placeholder="手机/用户名" v-model="phone" />
    </div>
    <div class="mi">
      <input type="password" placeholder="密码" v-model="pass" />
      <span class="iconfont icon-yincang"></span>
    </div>
    <div><button @click="denglu">登录</button></div>
    <div class="sj">
      <span>手机号登录</span>
      <span>忘记密码</span>
    </div>
    <div class="xie">
      <input type="radio" />
      <span>已阅读并同意</span>
      <span class="q1">《用户服务协议》</span>
      <span>、</span>
      <span class="q1">《隐私政策》</span>
    </div>
  </div>
</template>

<script>
import { user_register, user_login,address_list } from "@/api";
export default {
  data() {
    return {
      phone: "",
      pass: "",
    };
  },
  methods: {
    denglu() {
      user_login({ phone: this.phone, pass: this.pass }).then((res) => {
        if (res.data.code == 200) {
          localStorage.setItem('userinfo',JSON.stringify(res.data.userinfo))
          localStorage.setItem('token',res.data.token)
          this.$router.push('/home')
          alert(res.data.msg);
        } else {
          alert(res.data.msg);
        }
      });
    },
  },
  mounted() {
    // user_login({phone:13611129070,pass:1234}).then((res)=>{
    //     console.log(res.data);
    // })
  },
};
</script>

<style scoped>
.box {
  padding: 10px 20px;
}
.iconfont {
  font-size: 30px;
}
.zi {
  font-size: 30px;
  font-weight: bold;
  margin-top: 80px;
  margin-bottom: 50px;
}
.mi input {
  width: 374px;
  height: 60px;
  border: 0;
  font-size: 20px;
  border-bottom: 1px solid #e5e5e5;
  cursor: pointer;
  margin-top: 5px;
  /* color:#cccccc; */
}
.icon-yincang {
  position: relative;
  left: 345px;
  bottom: 45px;
  color: #cccccc;
}
button {
  width: 374px;
  height: 40px;
  color: #999999;
  border-radius: 20px;
  border: none;
  margin-top: 20px;
  font-size: 18px;
  background-color: #ccc;
}
.sj {
  margin-top: 20px;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  color: #51aeeb;
}
.xie {
  margin-top: 160px;
  color: #ccc;
}
.q1 {
  color: #51aeeb;
}
</style>>

</style>